<template>
  <view class="self-wash-entry" :style="{'margin-top': top, 'margin-bottom': bottom}" @click="onSelfWash">
    <view class="box">
      <image class="img-logo" src="https://files.yzsheng.com/client/selfwash/7maiche_1.png"></image>
      <view class="text"><text>自助洗车低至<text class="red">2</text>元</text></view>
      <view class="icon"><u-icon name="arrow-right" size="32" color="#ffe262"></u-icon></view>
    </view>
  </view>
</template>

<script>
export default{
  data() {
    return {
      
    }
  },
  props: {
    top: {
      type: String,
      default: '24rpx'
    },
    bottom: {
      type: String,
      default: '0'
    }
  },
  methods: {
    onSelfWash() {
      uni.navigateTo({
        url: '/pages_commodity/selfWash/selfWash'
      })
    }
  }
}
</script>

<style lang="scss">
.self-wash-entry {
  overflow: hidden;
  .box{
    width: 698rpx;
    height: 84rpx;
    background: linear-gradient(90deg, #FFDB3F, #FFE264);
    border-radius: 42rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx 0 38rpx;
    .img-logo{
      width: 144rpx;
      height: 50rpx;
    }
    .text{
      font-size: 36rpx;
      color: #5C4B00;
      font-weight: bold;
      margin-left: -50rpx;
      .red{
        color: #E5544E;
      }
    }
    .icon{
      width: 50rpx;
      height: 50rpx;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #DCB716;
    }
  }
}
</style>
